<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    #uu {
        list-style-type: none;
        margin: 0;
        padding: 0;
    }

    li {
        border-bottom: 1px solid deepskyblue;
        /* height: 50px; */
        line-height: 100px;
        min-height: 100px;

    }

    #uu li img {
        height: 60px;
        vertical-align: middle;
    }
</style>

<body>
    <div class="container">
        <ul id="uu">

        </ul>
    </div>
</body>

</html>
<script src="./lazyload.js"></script>
<script>
    (function () {
        //全局变量
        let pageid = 1;//页码
        let oldData = [] //老数据
        //首先封装一个叫做render的方法,这个方法专门用于渲染视图
        //data就是要传递的数据
        function render(data = [], containerSelector) {
            // console.log(data)
            let container = document.querySelector(containerSelector)

            oldData = [...oldData, ...data]
            // console.log(oldData)
            //遍历数据,生成结构

            let html = ""

            oldData.forEach(item => {
                html += `<li>
                ${item.productImg2}
                <b>${item.productName}</b>
            </li>`
            })

            container.innerHTML = html;

        }
        //这个方法专门用于请求数据
        function fetchData(pageid = 1) {
            fetch(`http://chst.vip:1234/api/getmoneyctrl?pageid=${pageid}`)
                .then(body => body.json())
                .then(res => {
                    // console.log(res)
                    render(res.result, "#uu")
                })
        }

        fetchData() //页面加载的时候 首次要调用这个方法,发起请求渲染页面

        lazyLoad(function () {//懒加载
            pageid++
            if (pageid > 14) {//后台只有14页 所以大于这个值的时候 啥也不干
                return
            }
            // console.log(pageid)
            fetchData(pageid)
        })
    })()
</script>